{"componentChunkName":"component---src-templates-post-js","path":"/blog/es-class","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🚑 ES Class 相关","tips":[],"categories":["code"],"datetime":"2019-10-20 14:35:15","noFooter":false,"description":"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。","plainTextDescription":"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/9e575/banner.jpg 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/79449/banner.jpg 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7fe04/banner.webp 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d619e/banner.webp 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}},"bannerCredit":null,"slug":"/blog/es-class","tags":["ESLint","前端","TypeScript","最佳实践"]},"headings":[{"value":"想让读者了解的事情","depth":2},{"value":"1. 类声明 vs 类表达式","depth":3},{"value":"2. 构造函数，静态方法，原型方法，getter 和 setter 都在严格模式下执行。","depth":3},{"value":"3. 实例属性 / 字段声明 / 公共和私有字段","depth":3},{"value":"4. 类成员声明","depth":3},{"value":"4.1 TypeScript 中的类型注解","depth":4},{"value":"4.2 访问修饰符","depth":4},{"value":"4.3 readonly 修饰符","depth":4},{"value":"5. extends 继承","depth":3},{"value":"5.1 TypeScript 中的继承","depth":4},{"value":"6. 子类覆盖父类","depth":3},{"value":"7. this 问题","depth":3},{"value":"7.1 TypeScript 中的 this 类型","depth":4},{"value":"8. 抽象类","depth":3},{"value":"9. 接口实现（implements）","depth":3},{"value":"10. 泛型类","depth":3},{"value":"最后","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"es-class\",\n  \"title\": \"🚑 ES Class 相关\",\n  \"date\": \"2019-10-20 14:35:15\",\n  \"author\": \"Ubug\",\n  \"description\": \"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"ESLint\", \"前端\", \"TypeScript\", \"最佳实践\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\u60F3\\u8BA9\\u8BFB\\u8005\\u4E86\\u89E3\\u7684\\u4E8B\\u60C5\"), mdx(\"p\", null, \"\\u5728\\u9605\\u8BFB\\u8FD9\\u7BC7\\u5173\\u4E8E ES Class \\u7684\\u6587\\u7AE0\\u524D\\uFF0C\\u5E0C\\u671B\\u4F60\\u80FD\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Class \\u662F\\u8BED\\u6CD5\\u7CD6\"), \" - ES Class \\u672C\\u8D28\\u4E0A\\u662F prototype \\u7684\\u8BED\\u6CD5\\u7CD6\\uFF0C\\u4E0D\\u662F\\u5168\\u65B0\\u7684\\u6982\\u5FF5\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6267\\u884C\\u73AF\\u5883\\u7684\\u5DEE\\u5F02\"), \" - \\u4E0D\\u540C\\u73AF\\u5883\\u4E0B Class \\u7684\\u8868\\u73B0\\u53EF\\u80FD\\u6709\\u6240\\u4E0D\\u540C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u7EE7\\u627F\\u673A\\u5236\\u7684\\u672C\\u8D28\"), \" - \\u7406\\u89E3\\u539F\\u578B\\u94FE\\u548C\\u6784\\u9020\\u51FD\\u6570\\u7684\\u6267\\u884C\\u987A\\u5E8F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u9759\\u6001 vs \\u5B9E\\u4F8B\"), \" - \\u660E\\u786E\\u9759\\u6001\\u65B9\\u6CD5\\u548C\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u7684\\u533A\\u522B\\u548C\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u79C1\\u6709\\u6210\\u5458\\u7684\\u91CD\\u8981\\u6027\"), \" - \\u79C1\\u6709\\u5B57\\u6BB5\\u548C\\u65B9\\u6CD5\\u5982\\u4F55\\u63D0\\u5347\\u4EE3\\u7801\\u5B89\\u5168\\u6027\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"TypeScript \\u7684\\u589E\\u5F3A\"), \" - TS \\u5728 Class \\u4E0A\\u589E\\u52A0\\u4E86\\u7C7B\\u578B\\u6CE8\\u89E3\\u3001\\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\\u3001\\u62BD\\u8C61\\u7C7B\\u7B49\\u80FD\\u529B\\uFF0C\\u4F46\\u6700\\u7EC8\\u7F16\\u8BD1\\u4EA7\\u7269\\u8FD8\\n\\u662F ES Class\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053 ES Class \\u7684\\u4E0D\\u540C\\u6807\\u51C6\\u548C\\u5B9E\\u73B0\\uFF0C\\u867D\\u7136\\u611F\\u89C9\\u5F88\\u7B26\\u5408\\u76F4\\u89C9\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u4ECE\\u672C\\u8D28\\u4E0A\\u4E0D\\u540C\\u7684\\u5730\\u65B9\\u3002\")), mdx(\"p\", null, \"class \\u7684\\u5386\\u53F2\\u53D8\\u9769\\u7B97\\u662F\\u5F88\\u574E\\u5777\\uFF0C\\u4F46\\u662F\\u5E76\\u6CA1\\u6709\\u4EC0\\u4E48\\u610F\\u601D\\uFF0Cclass \\u4E5F\\u66F4\\u591A\\u7684\\u662F\\u4E00\\u79CD\\u8BA9\\u5927\\u90E8\\u5206\\u4EBA\\u90FD\\u5F88\\u5BB9\\u6613\\u7406\\u89E3\\u7684\\u89C4\\u8303\\u800C\\u5DF2\\n\\u3002\\u5305\\u62EC\\u5404\\u79CD prototype \\u5C01\\u88C5\\u3001\\u8BED\\u6CD5\\u7CD6\\u3001Hack \\u4E4B\\u7C7B\\u7684\\u8BA8\\u8BBA\\u4E5F\\u90FD\\u5E76\\u4E0D\\u662F\\u9762\\u5411\\u4E1A\\u52A1\\u548C\\u666E\\u9002\\u7684\\u5DE5\\u7A0B\\u5316\\u7684\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u66F4\\u60F3\\u89E3\\u91CA\\u4E0B\\u5404\\u79CD\\u8FD0\\u884C\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u4E60\\u4EE5\\u4E3A\\u5E38\\u7684\\u7528\\u6CD5\\uFF0C\\u6709\\u54EA\\u4E9B\\u53CD\\u76F4\\u89C9\\u6216\\u8005\\u8BF4\\u4E0D\\u4E00\\u6837\\u7684\\uFF0C\\u5F53\\u7136\\u4EC5\\u4EC5\\u5BF9\\u4E8E\\u6211\\u6765\\u8BF4\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u540E\\u6765\\u5DE5\\u4F5C\\u4E2D\\u5927\\u91CF\\u4F7F\\u7528\\u4E86 TypeScript\\uFF0C\\u53D1\\u73B0 TS \\u5BF9 Class \\u505A\\u4E86\\u5F88\\u591A\\u589E\\u5F3A\\u3002\\u8FD9\\u7BC7\\u6587\\u7AE0\\u4E5F\\u987A\\u52BF\\u52A0\\u5165\\u4E86 TS \\u76F8\\u5173\\u7684\\u5185\\u5BB9\\n\\uFF0C\\u6BD5\\u7ADF\\u73B0\\u5728\\u5199 JS \\u4E0D\\u5E26 TS \\u5DF2\\u7ECF\\u5F88\\u5C11\\u89C1\\u4E86\\u3002\")), mdx(\"h3\", null, \"1. \\u7C7B\\u58F0\\u660E vs \\u7C7B\\u8868\\u8FBE\\u5F0F\"), mdx(\"p\", null, \"\\u867D\\u7136\\u770B\\u8D77\\u6765\\u76F8\\u4F3C\\uFF0C\\u4F46\\u4E24\\u8005\\u6709\\u91CD\\u8981\\u533A\\u522B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// \\u7C7B\\u58F0\\u660E\\uFF08\\u63D0\\u5347\\uFF09\\nRectangle // \\u53EF\\u4EE5\\u8BBF\\u95EE\\uFF08hoisted\\uFF09\\nclass Rectangle {\\n  constructor(height, width) {\\n    this.height = height\\n    this.width = width\\n  }\\n}\\n\\n// \\u7C7B\\u8868\\u8FBE\\u5F0F\\uFF08\\u4E0D\\u63D0\\u5347\\uFF09\\nlet Square = class {\\n  constructor(side) {\\n    this.side = side\\n  }\\n}\\n\\nSquare // \\u53EF\\u4EE5\\u8BBF\\u95EE\\nRectangleClass // ReferenceError: Cannot access 'RectangleClass' before initialization\\n\")), mdx(\"p\", null, \"\\u5728\\u5B9E\\u9645\\u9879\\u76EE\\u4E2D\\uFF0C\\u7C7B\\u58F0\\u660E\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\\uFF0C\\u800C\\u7C7B\\u8868\\u8FBE\\u5F0F\\u5728\\u9700\\u8981\\u52A8\\u6001\\u521B\\u5EFA\\u7C7B\\u65F6\\u5F88\\u6709\\u7528\\u3002\"), mdx(\"h3\", null, \"2. \\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u539F\\u578B\\u65B9\\u6CD5\\uFF0Cgetter \\u548C setter \\u90FD\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u6267\\u884C\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"class Rectangle {\\n  constructor(height, width) {\\n    this.height = height\\n    this.width = width\\n  }\\n}\\n\")), mdx(\"h3\", null, \"3. \\u5B9E\\u4F8B\\u5C5E\\u6027 / \\u5B57\\u6BB5\\u58F0\\u660E / \\u516C\\u5171\\u548C\\u79C1\\u6709\\u5B57\\u6BB5\"), mdx(\"p\", null, \"\\u4E00\\u822C\\u7C7B\\u91CC\\u9762\\u7684\\u5173\\u952E\\u8BCD\\u6709\\uFF1A\\u5C5E\\u6027\\u3001\\u65B9\\u6CD5\\uFF0C\\u9759\\u6001\\u65B9\\u6CD5\\u3002\"), mdx(\"p\", null, \"ES2022 \\u6B63\\u5F0F\\u5F15\\u5165\\u4E86\\u79C1\\u6709\\u5B57\\u6BB5\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"#\"), \" \\u524D\\u7F00\\uFF09\\uFF0C\\u4E4B\\u524D\\u5927\\u5BB6\\u53EA\\u80FD\\u9760\\u547D\\u540D\\u7EA6\\u5B9A\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_xxx\"), \"\\uFF09\\u6765\\\"\\u5047\\u88C5\\\"\\u79C1\\u6709\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"class User {\\n  #password = '123456'; // \\u79C1\\u6709\\u5B57\\u6BB5\\uFF0C\\u5916\\u90E8\\u65E0\\u6CD5\\u8BBF\\u95EE\\n\\n  constructor(name) {\\n    this.name = name;    // \\u516C\\u5171\\u5B57\\u6BB5\\n  }\\n\\n  #validate(pwd) {       // \\u79C1\\u6709\\u65B9\\u6CD5\\n    return pwd === this.#password;\\n  }\\n\\n  login(pwd) {\\n    return this.#validate(pwd);\\n  }\\n}\\n\\nconst u = new User('ubug');\\nu.#password; // SyntaxError: Private field '#password' must be declared in an enclosing class\\n\")), mdx(\"p\", null, \"\\u6CE8\\u610F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"#\"), \" \\u79C1\\u6709\\u5B57\\u6BB5\\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"private\"), \" \\u5173\\u952E\\u5B57\\u4E0D\\u4E00\\u6837\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"#\"), \" \\u662F\\u8BED\\u8A00\\u5C42\\u9762\\u7684\\u5B9E\\u73B0\\uFF0C\\u4E0D\\u662F TypeScript \\u7279\\u6709\\u7684\\u3002\"), mdx(\"h3\", null, \"4. \\u7C7B\\u6210\\u5458\\u58F0\\u660E\"), mdx(\"p\", null, \"-> \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/tc39/proposal-class-fields\"\n  }, \"https://github.com/tc39/proposal-class-fields\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"class A {\\n  method() {\\n    //\\n  }\\n  method2 = function() {\\n    // Unexpected token =\\n    // fixed by @babel/plugin-proposal-class-properties\\n    // Class field declarations\\n  }\\n}\\nA.prototype.method3 = function() {\\n  //\\n}\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"method2\"), \" \\u662F\\u5C5E\\u6027\\uFF0C\\u5F15\\u7528\\u4E86\\u4E00\\u4E2A\\u51FD\\u6570\\uFF1Bmethod \\u548C method3 \\u90FD\\u662F\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u3002\"), mdx(\"h4\", null, \"4.1 TypeScript \\u4E2D\\u7684\\u7C7B\\u578B\\u6CE8\\u89E3\"), mdx(\"p\", null, \"TS \\u91CC\\u5199 Class \\u6700\\u76F4\\u89C2\\u7684\\u533A\\u522B\\u5C31\\u662F\\u5C5E\\u6027\\u8981\\u58F0\\u660E\\u7C7B\\u578B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Rectangle {\\n  width: number\\n  height: number\\n\\n  constructor(width: number, height: number) {\\n    this.width = width\\n    this.height = height\\n  }\\n\\n  getArea(): number {\\n    return this.width * this.height\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u53C2\\u6570\\u5C5E\\u6027\\uFF08Parameter Properties\\uFF09\\u662F\\u4E2A\\u5F88\\u7701\\u4E8B\\u7684\\u5199\\u6CD5\\uFF0C\\u6784\\u9020\\u51FD\\u6570\\u53C2\\u6570\\u52A0\\u4FEE\\u9970\\u7B26\\u5C31\\u80FD\\u81EA\\u52A8\\u58F0\\u660E\\u5E76\\u8D4B\\u503C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Rectangle {\\n  constructor(public width: number, public height: number) {}\\n\\n  getArea(): number {\\n    return this.width * this.height\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u5C11\\u5199\\u51E0\\u884C\\u4EE3\\u7801\\uFF0C\\u5BF9\\u4E8E DTO \\u4E4B\\u7C7B\\u7684\\u7C7B\\u7279\\u522B\\u597D\\u7528\\u3002\"), mdx(\"h4\", null, \"4.2 \\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\"), mdx(\"p\", null, \"TypeScript \\u63D0\\u4F9B\\u4E86\\u4E09\\u4E2A\\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"public\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"private\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"protected\"), \"\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Animal {\\n  public name: string // \\u516C\\u5F00\\uFF0C\\u9ED8\\u8BA4\\u5C31\\u662F\\u8FD9\\u4E2A\\n  private age: number // \\u79C1\\u6709\\uFF0C\\u53EA\\u6709\\u7C7B\\u5185\\u90E8\\u80FD\\u8BBF\\u95EE\\n  protected species: string // \\u53D7\\u4FDD\\u62A4\\uFF0C\\u5B50\\u7C7B\\u80FD\\u8BBF\\u95EE\\n\\n  constructor(name: string, age: number, species: string) {\\n    this.name = name\\n    this.age = age\\n    this.species = species\\n  }\\n}\\n\\nclass Dog extends Animal {\\n  constructor(name: string, age: string) {\\n    super(name, age, 'Canis lupus familiaris')\\n  }\\n\\n  getInfo(): string {\\n    return `${this.name} (${this.species})` // \\u53EF\\u4EE5\\u8BBF\\u95EE protected\\uFF0C\\u4E0D\\u80FD\\u8BBF\\u95EE private\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u6709\\u4E2A\\u5BB9\\u6613\\u6DF7\\u6DC6\\u7684\\u70B9\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"TS \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"private\"), \" \\u548C ES2022 \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"#\"), \" \\u662F\\u4E24\\u5957\\u4E1C\\u897F\"), \"\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"TS \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"private\"), \" \\u662F\\u7F16\\u8BD1\\u671F\\u68C0\\u67E5\\uFF0C\\u7F16\\u8BD1\\u540E\\u6D88\\u5931\\uFF0C\\u8FD0\\u884C\\u65F6\\u8DDF\\u666E\\u901A\\u5C5E\\u6027\\u6CA1\\u533A\\u522B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"#\"), \" \\u662F ES \\u8BED\\u8A00\\u6807\\u51C6\\uFF0C\\u8FD0\\u884C\\u65F6\\u5F3A\\u5236\\u79C1\\u6709\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Foo {\\n  private bar = 1;\\n  #baz = 2;\\n}\\n\\n// \\u7F16\\u8BD1\\u4E3A JS \\u540E\\uFF1A\\nclass Foo {\\n  constructor() {\\n    this.bar = 1;  // \\u8FD0\\u884C\\u65F6\\u5B8C\\u5168\\u53EF\\u8BBF\\u95EE\\n    this.#baz = 2; // \\u8FD0\\u884C\\u65F6\\u771F\\u7684\\u79C1\\u6709\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u5B9E\\u9645\\u9879\\u76EE\\u4E2D\\u600E\\u4E48\\u9009\\uFF1F\\u8BF4\\u5B9E\\u8BDD\\u5927\\u591A\\u6570\\u65F6\\u5019\\u7528 TS \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"private\"), \" \\u5C31\\u591F\\u4E86\\uFF0C\\u6BD5\\u7ADF\\u7C7B\\u578B\\u68C0\\u67E5\\u5DF2\\u7ECF\\u5728\\u7F16\\u8BD1\\u671F\\u5E2E\\u4F60\\u515C\\u5E95\\u4E86\\uFF0C\\u8DB3\\u591F\\u7528\\u4E86\\u3002\"), mdx(\"h4\", null, \"4.3 readonly \\u4FEE\\u9970\\u7B26\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Config {\\n  readonly env: string\\n  readonly version: string\\n\\n  constructor(env: string, version: string) {\\n    this.env = env\\n    this.version = version\\n  }\\n}\\n\\nconst cfg = new Config('production', '1.0.0')\\ncfg.env = 'dev' // TS Error: Cannot assign to 'env' because it is a read-only property\\n\")), mdx(\"p\", null, \"\\u4E5F\\u53EF\\u4EE5\\u548C\\u53C2\\u6570\\u5C5E\\u6027\\u7EC4\\u5408\\u4F7F\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Config {\\n  constructor(public readonly env: string, public readonly version: string) {}\\n}\\n\")), mdx(\"h3\", null, \"5. extends \\u7EE7\\u627F\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"class Animal {\\n  constructor(name) {\\n    this.name = name\\n  }\\n  speak() {\\n    console.log(`${this.name} makes a noise.`)\\n  }\\n}\\n\\nclass Dog extends Animal {\\n  speak() {\\n    console.log(`${this.name} barks.`)\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u7EE7\\u627F\\u7684\\u8981\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5B50\\u7C7B\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"constructor\"), \" \\u91CC\\u5FC5\\u987B\\u5148\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"super()\"), \" \\u624D\\u80FD\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"this\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"extends\"), \" \\u4E0D\\u4EC5\\u80FD\\u7EE7\\u627F\\u7C7B\\uFF0C\\u8FD8\\u80FD\\u7EE7\\u627F\\\"\\u5177\\u6709\\u6784\\u9020\\u7B7E\\u540D\\u7684\\u5BF9\\u8C61\\\"\\uFF08TS \\u4E2D\\uFF09\")), mdx(\"h4\", null, \"5.1 TypeScript \\u4E2D\\u7684\\u7EE7\\u627F\"), mdx(\"p\", null, \"TS \\u5728\\u7EE7\\u627F\\u8FD9\\u5757\\u4E3B\\u8981\\u589E\\u52A0\\u4E86\\u7C7B\\u578B\\u7EA6\\u675F\\uFF0C\\u8BA9\\u7236\\u5B50\\u7C7B\\u7684\\u5173\\u7CFB\\u66F4\\u660E\\u786E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Animal {\\n  constructor(public name: string) {}\\n\\n  speak(): string {\\n    return `${this.name} makes a noise.`\\n  }\\n}\\n\\nclass Dog extends Animal {\\n  constructor(name: string, public breed: string) {\\n    super(name)\\n  }\\n\\n  speak(): string {\\n    return `${this.name} barks.`\\n  }\\n}\\n\\nconst d = new Dog('Buddy', 'Golden Retriever')\\nd.speak() // \\\"Buddy barks.\\\"\\nd.breed // \\\"Golden Retriever\\\"\\nd.name // \\\"Buddy\\\" \\u2014 \\u7EE7\\u627F\\u81EA Animal\\n\")), mdx(\"p\", null, \"TS \\u8FD8\\u5141\\u8BB8\\u7EE7\\u627F\\u5185\\u7F6E\\u7C7B\\u578B\\uFF0C\\u8FD9\\u5728 ES \\u4E2D\\u662F\\u505A\\u4E0D\\u5230\\u7C7B\\u578B\\u5B89\\u5168\\u7684\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class MyArray<T> extends Array<T> {\\n  first(): T | undefined {\\n    return this[0]\\n  }\\n\\n  last(): T | undefined {\\n    return this[this.length - 1]\\n  }\\n}\\n\\nconst arr = new MyArray<number>(1, 2, 3)\\narr.first() // 1\\narr.last() // 3\\n\")), mdx(\"h3\", null, \"6. \\u5B50\\u7C7B\\u8986\\u76D6\\u7236\\u7C7B\"), mdx(\"p\", null, \"\\u5B50\\u7C7B\\u8986\\u76D6\\u7236\\u7C7B\\u65B9\\u6CD5\\u65F6\\uFF0CTS \\u7684\\u89C4\\u5219\\u6BD4 ES \\u4E25\\u683C\\u5F97\\u591A\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Base {\\n  greet(name: string): string {\\n    return `Hello, ${name}`\\n  }\\n\\n  log(): void {\\n    console.log('logging')\\n  }\\n}\\n\\nclass Derived extends Base {\\n  // \\u53C2\\u6570\\u7C7B\\u578B\\u5FC5\\u987B\\u517C\\u5BB9\\uFF08\\u53EF\\u4EE5\\u66F4\\u5BBD\\u677E\\uFF0C\\u4F46\\u4E0D\\u80FD\\u66F4\\u4E25\\u683C\\uFF09\\n  greet(name: string | number): string {\\n    return `Hello, ${name}`\\n  }\\n\\n  // \\u8FD4\\u56DE\\u7C7B\\u578B\\u4E5F\\u5FC5\\u987B\\u517C\\u5BB9\\uFF08\\u53EF\\u4EE5\\u66F4\\u5177\\u4F53\\uFF0C\\u4F46\\u4E0D\\u80FD\\u66F4\\u5BBD\\u6CDB\\uFF09\\n  // log(): number { return 1; } // Error: \\u7C7B\\u578B\\u4E0D\\u517C\\u5BB9\\n}\\n\")), mdx(\"p\", null, \"\\u7B80\\u5355\\u6765\\u8BF4\\u5C31\\u662F\\u91CC\\u6C0F\\u66FF\\u6362\\u539F\\u5219\\uFF08LSP\\uFF09\\uFF1A\\u51E1\\u662F\\u80FD\\u7528\\u7236\\u7C7B\\u7684\\u5730\\u65B9\\uFF0C\\u5B50\\u7C7B\\u5E94\\u8BE5\\u4E5F\\u80FD\\u7528\\uFF0C\\u4E0D\\u80FD\\\"\\u7834\\u574F\\u5951\\u7EA6\\\"\\u3002\"), mdx(\"h3\", null, \"7. this \\u95EE\\u9898\"), mdx(\"p\", null, \"prototype properties arrow functions are not present on the object's prototype, they are merely\\nproperties holding a reference to a function.\"), mdx(\"p\", null, \"\\u5728 Class \\u4E2D \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"this\"), \" \\u4E22\\u5931\\u662F\\u7ECF\\u5178\\u95EE\\u9898\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"class Button {\\n  constructor(label) {\\n    this.label = label\\n  }\\n\\n  handleClick() {\\n    console.log(`Clicked: ${this.label}`)\\n  }\\n\\n  render() {\\n    const btn = document.createElement('button')\\n    btn.textContent = this.label\\n    btn.addEventListener('click', this.handleClick) // this \\u4F1A\\u4E22\\u5931\\uFF01\\n    return btn\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u5E38\\u89C1\\u89E3\\u6CD5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"// \\u65B9\\u6848\\u4E00\\uFF1A\\u6784\\u9020\\u51FD\\u6570\\u91CC bind\\nconstructor(label) {\\n  this.label = label;\\n  this.handleClick = this.handleClick.bind(this);\\n}\\n\\n// \\u65B9\\u6848\\u4E8C\\uFF1A\\u7BAD\\u5934\\u51FD\\u6570\\u5C5E\\u6027\\uFF08Class Fields\\uFF09\\nhandleClick = () => {\\n  console.log(`Clicked: ${this.label}`);\\n};\\n\\n// \\u65B9\\u6848\\u4E09\\uFF1A\\u4E8B\\u4EF6\\u76D1\\u542C\\u65F6\\u5305\\u88C5\\nbtn.addEventListener('click', () => this.handleClick());\\n\")), mdx(\"h4\", null, \"7.1 TypeScript \\u4E2D\\u7684 this \\u7C7B\\u578B\"), mdx(\"p\", null, \"TS \\u5BF9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"this\"), \" \\u6709\\u4E13\\u95E8\\u7684\\u7C7B\\u578B\\u7CFB\\u7EDF\\u652F\\u6301\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class Handler {\\n  info: string\\n\\n  constructor(info: string) {\\n    this.info = info\\n  }\\n\\n  // this \\u53C2\\u6570\\uFF1A\\u786E\\u4FDD\\u65B9\\u6CD5\\u53EA\\u5728\\u6B63\\u786E\\u7684\\u5BF9\\u8C61\\u4E0A\\u88AB\\u8C03\\u7528\\n  greet(this: {info: string}): string {\\n    return `Hello, ${this.info}`\\n  }\\n}\\n\\nconst h = new Handler('world')\\nh.greet() // OK\\n\\n// \\u89E3\\u6784\\u540E this \\u4E22\\u5931\\uFF0CTS \\u80FD\\u68C0\\u67E5\\u51FA\\u6765\\nconst {greet} = h\\ngreet() // TS Error: The 'this' context of type 'void' is not assignable to method's 'this'\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"this\"), \" \\u7C7B\\u578B\\u5728\\u94FE\\u5F0F\\u8C03\\u7528\\u4E2D\\u7279\\u522B\\u597D\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class QueryBuilder {\\n  private query = ''\\n\\n  where(condition: string): this {\\n    this.query += ` WHERE ${condition}`\\n    return this\\n  }\\n\\n  orderBy(field: string): this {\\n    this.query += ` ORDER BY ${field}`\\n    return this\\n  }\\n\\n  build(): string {\\n    return this.query\\n  }\\n}\\n\\nconst q = new QueryBuilder()\\n  .where('age > 18')\\n  .orderBy('name')\\n  .build()\\n\")), mdx(\"p\", null, \"\\u8FD4\\u56DE \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"this\"), \" \\u800C\\u4E0D\\u662F\\u5177\\u4F53\\u7C7B\\u540D\\u7684\\u597D\\u5904\\u662F\\uFF1A\\u5B50\\u7C7B\\u7EE7\\u627F\\u540E\\u94FE\\u5F0F\\u8C03\\u7528\\u8FD4\\u56DE\\u7684\\u8FD8\\u662F\\u5B50\\u7C7B\\u7C7B\\u578B\\uFF0C\\u7C7B\\u578B\\u4E0D\\u4F1A\\u4E22\\u5931\\u3002\"), mdx(\"h3\", null, \"8. \\u62BD\\u8C61\\u7C7B\"), mdx(\"p\", null, \"\\u8FD9\\u662F TypeScript \\u72EC\\u6709\\u7684\\uFF0CES \\u6807\\u51C6\\u6CA1\\u6709\\u62BD\\u8C61\\u7C7B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"abstract class Shape {\\n  abstract getArea(): number // \\u5B50\\u7C7B\\u5FC5\\u987B\\u5B9E\\u73B0\\n\\n  describe(): string {\\n    return `This shape has an area of ${this.getArea()}`\\n  }\\n}\\n\\nclass Circle extends Shape {\\n  constructor(public radius: number) {\\n    super()\\n  }\\n\\n  getArea(): number {\\n    return Math.PI * this.radius ** 2\\n  }\\n}\\n\\n// const s = new Shape(); // TS Error: \\u4E0D\\u80FD\\u5B9E\\u4F8B\\u5316\\u62BD\\u8C61\\u7C7B\\nconst c = new Circle(5)\\nc.describe() // \\\"This shape has an area of 78.53981633974483\\\"\\n\")), mdx(\"p\", null, \"\\u62BD\\u8C61\\u7C7B\\u548C\\u63A5\\u53E3\\u7684\\u533A\\u522B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u62BD\\u8C61\\u7C7B\\u53EF\\u4EE5\\u6709\\u5B9E\\u73B0\\uFF0C\\u63A5\\u53E3\\u4E0D\\u80FD\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E00\\u4E2A\\u7C7B\\u53EA\\u80FD\\u7EE7\\u627F\\u4E00\\u4E2A\\u62BD\\u8C61\\u7C7B\\uFF0C\\u4F46\\u53EF\\u4EE5\\u5B9E\\u73B0\\u591A\\u4E2A\\u63A5\\u53E3\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u62BD\\u8C61\\u7C7B\\u9002\\u5408\\\"\\u6A21\\u677F\\u65B9\\u6CD5\\\"\\u6A21\\u5F0F\\uFF0C\\u63A5\\u53E3\\u9002\\u5408\\u5B9A\\u4E49\\\"\\u5951\\u7EA6\\\"\")), mdx(\"h3\", null, \"9. \\u63A5\\u53E3\\u5B9E\\u73B0\\uFF08implements\\uFF09\"), mdx(\"p\", null, \"\\u7C7B\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u63A5\\u53E3\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"interface Printable {\\n  print(): void\\n}\\n\\ninterface Loggable {\\n  log(message: string): void\\n}\\n\\nclass Report implements Printable, Loggable {\\n  constructor(public title: string) {}\\n\\n  print(): void {\\n    console.log(`Printing: ${this.title}`)\\n  }\\n\\n  log(message: string): void {\\n    console.log(`[${this.title}] ${message}`)\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u6CE8\\u610F TS \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"implements\"), \" \\u53EA\\u505A\\u7F16\\u8BD1\\u671F\\u68C0\\u67E5\\uFF0C\\u4E0D\\u50CF Java \\u90A3\\u6837\\u6709\\u8FD0\\u884C\\u65F6\\u7684 interface \\u673A\\u5236\\u3002\\u7F16\\u8BD1\\u540E JS \\u91CC\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"implements\"), \" \\u5B8C\\u5168\\u6D88\\u5931\\u3002\"), mdx(\"h3\", null, \"10. \\u6CDB\\u578B\\u7C7B\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class DataStore<T> {\\n  private items: T[] = []\\n\\n  add(item: T): void {\\n    this.items.push(item)\\n  }\\n\\n  get(index: number): T | undefined {\\n    return this.items[index]\\n  }\\n\\n  getAll(): T[] {\\n    return [...this.items]\\n  }\\n}\\n\\nconst numberStore = new DataStore<number>()\\nnumberStore.add(1)\\nnumberStore.add('hello') // TS Error: \\u7C7B\\u578B\\u4E0D\\u5339\\u914D\\n\\nconst stringStore = new DataStore<string>()\\nstringStore.add('hello')\\n\")), mdx(\"p\", null, \"\\u6CDB\\u578B\\u7C7B\\u5728\\u5199\\u5DE5\\u5177\\u5E93\\u548C\\u57FA\\u7840\\u7EC4\\u4EF6\\u65F6\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u53EF\\u4EE5\\u907F\\u514D\\u5199\\u4E00\\u5806 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"any\"), \"\\u3002\"), mdx(\"h2\", null, \"\\u6700\\u540E\"), mdx(\"p\", null, \"\\u56DE\\u987E\\u4E00\\u4E0B\\uFF0CES Class \\u672C\\u8D28\\u662F prototype \\u7684\\u8BED\\u6CD5\\u7CD6\\uFF0C\\u800C TypeScript \\u5728\\u6B64\\u57FA\\u7840\\u4E0A\\u589E\\u52A0\\u4E86\\u7C7B\\u578B\\u7CFB\\u7EDF\\u3001\\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\\u3001\\u62BD\\u8C61\\u7C7B\\u3001\\u63A5\\u53E3\\u5B9E\\u73B0\\u3001\\u6CDB\\u578B\\u7B49\\u80FD\\u529B\\u3002\\u4F46\\u5F52\\u6839\\u7ED3\\u5E95\\uFF0CTS \\u7F16\\u8BD1\\u540E\\u8FD8\\u662F\\u4EA7\\u51FA ES Class \\u7684\\u4EE3\\u7801\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"7a84bc76-ba53-5e16-a1bc-e584aac14ed6","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/babel-understanding/babel-understanding.md","id":"de5b076e-9374-53fa-9af8-86c2604be3d4","parent":{"name":"babel-understanding","sourceInstanceName":"blog"},"excerpt":"想分享的是 Babel 这个工具的流程和最佳实践，平时开发必不可少 Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. 太长不看请到： 最佳实践 1. Babel 简单讲是什么？ Babel…","fields":{"title":"💡 Babel 再理解和最佳实践","slug":"/blog/babel-understanding","description":"现代前端技术发展的奠基石 Babel，一个神奇的存在，现代前端、工程化必不可少的一块拼图，简单梳理下体系和目前的最佳实践。","date":"2019-10-21","redirects":null,"datetime":"2019-10-21 13:54:13","categories":["code"],"series":null,"tags":["babel","ES6","polyfill","最佳实践","前端"],"status":"online"},"frontmatter":{"published":null,"tags":["babel","ES6","polyfill","最佳实践","前端"],"theme":null,"slug":"babel-understanding","date":"2019-10-21 13:54:13"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"babel-understanding\",\n  \"title\": \"💡 Babel 再理解和最佳实践\",\n  \"date\": \"2019-10-21 13:54:13\",\n  \"author\": \"Ubug\",\n  \"description\": \"现代前端技术发展的奠基石 Babel，一个神奇的存在，现代前端、工程化必不可少的一块拼图，简单梳理下体系和目前的最佳实践。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"babel\", \"ES6\", \"polyfill\", \"最佳实践\", \"前端\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F Babel \\u8FD9\\u4E2A\\u5DE5\\u5177\\u7684\\u6D41\\u7A0B\\u548C\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u5E73\\u65F6\\u5F00\\u53D1\\u5FC5\\u4E0D\\u53EF\\u5C11\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u592A\\u957F\\u4E0D\\u770B\\u8BF7\\u5230\\uFF1A\", mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"#4.%20%E7%BB%93%E8%AE%BA%20%2F%20%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5\"\n  }, \"\\u6700\\u4F73\\u5B9E\\u8DF5\"))), mdx(\"h2\", null, \"1. Babel \\u7B80\\u5355\\u8BB2\\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Babel\"), \" \\u9762\\u4E16\\u7684\\u73AF\\u5883\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ES\"), \" \\u6807\\u51C6\\u7684\\u63A8\\u8FDB\\u548C\\u6D4F\\u89C8\\u5668\\u6807\\u51C6\\u7F13\\u6162\\u5B9E\\u73B0\\u7684\\u65F6\\u5019\\uFF0C\\u5929\\u4E0B\\u82E6 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ES5\"), \" \\u4E45\\u77E3\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Babel\"), \" \\u5E26\\u7740\\u5DE8\\u5927\\u7684\\u638C\\u58F0\\uFF0C\\u501F\\u52A9\\u7740 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AST\"), \" \\u7684\\u5B8C\\u5907\\uFF0C\\u5B9E\\u73B0\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ES6\"), \" \\u8F6C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ES5\"), \" \\u7684\\u534E\\u4E3D\\u64CD\\u4F5C\\u3002\\u8BA9\\u82E6\\u903C\\u7A0B\\u5E8F\\u5458\\u4ECE\\u517C\\u5BB9\\u6027\\u7684\\u6CE5\\u6F6D\\u8131\\u8EAB\\uFF0C\\u66F4\\u4E13\\u6CE8\\u4E8E\\u7528\\u9AD8\\u7EA7\\u7684\\u8BED\\u6CD5\\u5B9E\\u73B0\\u4E1A\\u52A1\\uFF0C\\u517C\\u5BB9\\u6027\\u53EA\\u9700\\u8981\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel\"), \" \\u5904\\u7406\\u4E0B\\u5C31\\u80FD\\u4E0A\\u7EBF\\u4E86\\uFF0C\\u8BA9\\u524D\\u7AEF\\u5F88\\u5927\\u7684\\u52B3\\u52A8\\u529B\\u4E0D\\u518D\\u7EA0\\u7ED3\\u4E8E\\u517C\\u5BB9\\u6027\\u7684\\u9B54\\u5492\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5728\\u6DF1\\u5165\\u4E86\\u89E3 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel\"), \" \\u7684\\u76F8\\u5173\\u53D1\\u5C55\\u4E4B\\u540E\\u53EF\\u80FD\\u4F1A\\u975E\\u5E38\\u8FF7\\u60D1\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cli\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"core\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"polyfill\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"env\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"runtime\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"plugins\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"stage-0\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"2015\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"2016\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"preset\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"plugins\"), \" \\u90FD\\u662F\\u4EC0\\u4E48\\u9B3C\\uFF0C\\u5C31\\u60F3\\u7B80\\u7B80\\u5355\\u5355\\u7684\\u8F6C\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"es6\"), \" \\u4E0D\\u884C\\u5417\\uFF1F\"), mdx(\"p\", null, \"\\u5728\\u73B0\\u6210\\u7684\\u5DF2\\u6709\\u9879\\u76EE\\uFF0C\\u6216\\u8005\\u7528\\u811A\\u624B\\u67B6\\u5DE5\\u5177\\u521B\\u5EFA\\u7684\\u65F6\\u5019\\u5F88\\u5C11\\u4F1A\\u5728\\u8FD9\\u91CC\\u7EA0\\u7ED3\\u592A\\u4E45\\uFF0C\\u4F46\\u662F\\u5728\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u5C24\\u5176\\u662F\\u7F16\\u8BD1\\u51FA\\u6765\\u7684\\u9875\\u9762\\u5927\\u5C0F\\u8003\\u8651\\u540E\\u80AF\\u5B9A\\u4F1A\\u8981\\u5543\\u8FD9\\u5757\\u9AA8\\u5934\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6700\\u7B80\\u5355\\u7684\\u6D41\\u7A0B\\u662F\\uFF1A\"), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/chart-8c3ca9219db500fb82462ad217a7d2da.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u76F4\\u89C2\\u6D41\\u7A0B\"), \"\\n  \")), mdx(\"h2\", null, \"2. Babel Plugin\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Babel\"), \" \\u9762\\u4E34\\u7684\\u9700\\u6C42\\u4E5F\\u662F\\u5F88\\u5947\\u602A\\uFF0C\\u56E0\\u4E3A\\u6BCF\\u4E00\\u4E2A\\u6807\\u51C6\\u7684\\u86CB\\u751F\\u90FD\\u8981\\u4E00\\u4E2A\\u5F88\\u957F\\u7684\\u9636\\u6BB5\\uFF0C\\u5EFA\\u8BAE\\u3001\\u8349\\u6848\\u3001\\u5019\\u9009\\u7B49\\uFF0C\\u6807\\u51C6\\u4E5F\\u5F88\\u591A\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ES5\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ES6\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ES7\"), \"\\u7B49\\uFF0C\\u6240\\u4EE5\\u5C31\\u91C7\\u7528\\u4E86\\u63D2\\u4EF6\\u548C\\u914D\\u7F6E\\u7684\\u5F62\\u5F0F\\u3002\\u4E8E\\u662F\\u51FA\\u73B0\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"plugin\"), \" \\u7684\\u914D\\u7F6E\\u9879\\u3002\"), mdx(\"p\", null, \"\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"babel.config.json\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".babelrc\"), \" \\u4E2D\\u53EF\\u4EE5\\u914D\\u7F6E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"plugins\\\": [\\\"transform-class-properties\\\"]\\n}\\n\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u793A\\u4F8B\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transform-class-properties\"), \": \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Class \\u8BED\\u6CD5\"), \"\\u3002\\u6DFB\\u52A0\\u8FD9\\u4E2A\\u63D2\\u4EF6\\u5C31\\u80FD\\u5C06 es6 \\u4E0B\\u7684 class \\u5E26\\u5165\\u5230 es5 \\u7248\\u672C\\u4E2D\\u8FD0\\u884C\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"class People {\\n  sayName() {\\n    console.log(this.name);\\n  }\\n}\\n\\nvar p = new People();\\np.sayName = 'hello';\\n// ----------------- \\u4F1A\\u88AB\\u7F16\\u8BD1\\u4E3A\\u4E0B\\u9762\\u7684\\u4EE3\\u7801\\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== \\\"undefined\\\" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\\n\\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError(\\\"Cannot call a class as a function\\\"); } }\\n\\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\\\"value\\\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\\n\\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\\n\\nvar People = /*#__PURE__*/function () {\\n  \\\"use strict\\\";\\n\\n  function People() {\\n    _classCallCheck(this, People);\\n  }\\n\\n  _createClass(People, [{\\n    key: \\\"sayName\\\",\\n    value: function sayName() {\\n      console.log(this.name);\\n    }\\n  }]);\\n\\n  return People;\\n}();\\n\\nvar p = new People();\\np.sayName = 'hello';\\n\")), mdx(\"p\", null, \"-- BABEL \\u300Atry it out\\u300B\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u914D\\u7F6E\\u6587\\u4EF6\\u4E2D\\u53EF\\u4EE5\\u7701\\u7565\\u56FA\\u5B9A\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"babel-plugin-xxxxxx\"), \" \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"babel-plugin-\"), \"\\uFF0C\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"\\\"transform-class-properties\\\"\"), \" \\u8868\\u793A\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"babel-plugin-transform-class-properties\"), \" \\u8FD9\\u4E2A\\u63D2\\u4EF6\\u3002\"))), mdx(\"p\", null, \"babel \\u9488\\u5BF9\\u6BCF\\u4E00\\u4E2A\\u9AD8\\u7EA7\\u8BED\\u6CD5\\u7279\\u6027\\u90FD\\u5BF9\\u5E94\\u4E00\\u4E2A plugin \\u6765\\u505A\\u8F6C\\u6362\\uFF0C\\u66F4\\u52A0\\u7075\\u6D3B\\u3002\\u4F46\\u662F\\u5E73\\u65F6\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u4E0D\\u53EF\\u80FD\\u6BCF\\u6B21\\u7F16\\u8BD1\\u4E0D\\u901A\\u8FC7\\u518D\\u5F15\\u5165\\u5BF9\\u5E94\\u7684\\u63D2\\u4EF6\\uFF0C\\u4E5F\\u4E0D\\u53EF\\u80FD\\u5C06\\u5168\\u90E8\\u7684 babel \\u90FD\\u6253\\u5305\\u5230\\u9ED8\\u8BA4\\u91CC\\u9762\\u3002\\u6240\\u4EE5\\u5C31\\u51FA\\u73B0\\u4E86 Preset \\u7684\\u5904\\u7406\\u3002\"), mdx(\"h2\", null, \"3. Babel Preset\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Preset\"), \" \\u7684\\u6982\\u5FF5\\u5F88\\u597D\\u7406\\u89E3\\uFF0C\\u5F88\\u591A\\u8F85\\u52A9\\u5DE5\\u5177\\u90FD\\u6709\\uFF0C\\u8868\\u660E\\u53EF\\u4EE5\\u6253\\u5305\\u4E00\\u4E2A\\u914D\\u7F6E\\u6765\\u76F4\\u63A5\\u62FF\\u6765\\u4F7F\\u7528\\uFF0C\\u907F\\u514D\\u81EA\\u5DF1\\u7EF4\\u62A4\\u6574\\u4E2A\\u63D2\\u4EF6\\u5217\\u8868\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u5B98\\u65B9\\u793A\\u4F8B\\u63A8\\u8350\\u7684\\u5E38\\u7528\\u9884\\u8BBE\\u5305\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@babel/preset-env\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@babel/preset-flow\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@babel/preset-react\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@babel/preset-typescript\"))), mdx(\"p\", null, \"\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@babel/preset-env\"), \" \\u662F\\u4E00\\u4E2A\\u667A\\u80FD\\u7684\\u9884\\u8BBE\\u5305\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u76F4\\u63A5\\u4F7F\\u7528\\u6700\\u65B0\\u7684 Javascript\\uFF0C\\u800C\\u4E0D\\u9700\\u8981\\u7CBE\\u7EC6\\u7684\\u8003\\u8651\\u5177\\u4F53\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u9700\\u8981\\u90A3\\u4E2A\\u8BED\\u6CD5\\u8F6C\\u6362\\uFF0C\\u8FD8\\u5305\\u542B\\u53EF\\u9009\\u7684 polyfill \\u5904\\u7406\\u3002 \\u8FD8\\u53EF\\u4EE5\\u8BA9\\u8F6C\\u6362\\u51FA\\u6765\\u7684 JavaScript bundles \\u66F4\\u7CBE\\u7B80\\u3002(\\u540E\\u9762\\u4F1A\\u8BE6\\u8BF4\\u8FD9\\u4E2A preset)\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npm install --save-dev @babel/core @babel/cli @babel/preset-env\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"presets\\\": [\\\"@babel/env\\\"]\\n}\\n\")), mdx(\"p\", null, \"\\u4E00\\u884C\\u547D\\u4EE4\\u52A0\\u4E0A\\u4E00\\u4E2A\\u914D\\u7F6E\\u6587\\u4EF6\\u5373\\u53EF\\u4E0A\\u624B\\u5F00\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u9884\\u8BBE\\u7684\\u63D2\\u4EF6\\u5217\\u8868\\u90FD\\u662F\\u5305\\u542B\\u4E86\\u5BF9\\u5E94\\u7684\\u8BED\\u6CD5\\u8F6C\\u6362\\u9700\\u6C42\\uFF0C\\u8FD9\\u6837\\u5C31\\u8BA9\\u914D\\u7F6E\\u66F4\\u52A0\\u7CBE\\u7B80\\u4E86\\uFF0C\\u5982\\u679C\\u5728\\u8FD9\\u4E9B\\u6253\\u5305\\u7684\\u9884\\u8BBE\\u63D2\\u4EF6\\u4E4B\\u5916\\u8FD8\\u9700\\u8981\\uFF0C\\u6216\\u8005\\u72EC\\u7ACB\\u914D\\u7F6E\\uFF0C\\u4ECD\\u7136\\u53EF\\u4EE5\\u5728 plugin \\u7684\\u914D\\u7F6E\\u4E2D\\u5355\\u72EC\\u5F15\\u5165\\u548C\\u914D\\u7F6E\\u3002\"), mdx(\"p\", null, \"\\u81F3\\u6B64\\uFF0C\\u6211\\u4EEC\\u80FD\\u591F\\u6210\\u529F\\u7684\\u8F6C\\u6362\\u4E86\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8BED\\u6CD5\"), \"\\uFF0C\\u80FD\\u591F\\u8BA9\\u9AD8\\u7EA7\\u8BED\\u6CD5\\u8FD0\\u884C\\u5728\\u8001\\u6D4F\\u89C8\\u5668\\u91CC\\u9762\\u800C\\u4E0D\\u9700\\u8981\\u62C5\\u5FC3\\u7528\\u6237\\u6D4F\\u89C8\\u5668\\u662F\\u4E0D\\u662F\\u51E0\\u5E74\\u524D\\u7684\\u3002\"), mdx(\"h2\", null, \"3. polyfill\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u5C1D\\u8BD5\\u4E0B\\u9762\\u8FD9\\u4E2A\\u4EE3\\u7801\\uFF0C\\u8F6C\\u6362\\u540E\\u5728 ES5 \\u6D4F\\u89C8\\u5668\\u8FD0\\u884C\\u6CA1\\u95EE\\u9898\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const a = ({ num }) => {\\n  return num + 1\\n}\\n// \\u8F6C\\u6210\\u4E86 ----->\\nvar a = function a(_ref) {\\n  var num = _ref.num;\\n  return num + 1;\\n};\\n\")), mdx(\"p\", null, \"\\u4F46\\u662F\\u4E0B\\u9762\\u8FD9\\u4E2A\\u4EE3\\u7801\\u597D\\u50CF\\u5C31\\u4E0D\\u592A\\u4E00\\u6837\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const simpleMerge = (a, b) => {\\n  return Object.assign(a, b)\\n}\\n// \\u8F6C\\u6210\\u4E86 ----->\\nvar simpleMerge = function simpleMerge(a, b) {\\n  return Object.assign(a, b); // Object.assign \\u8FD9\\u4E2A\\u63A5\\u53E3\\u6CA1\\u6709\\u5B9E\\u73B0\\n};\\n\")), mdx(\"p\", null, \"\\u539F\\u56E0\\u662F\\u6211\\u4EEC\\u5E73\\u5E38\\u610F\\u4E49\\u4E0A\\u7684\\u517C\\u5BB9\\u6027\\u5305\\u542B\\u4E86 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8BED\\u6CD5\"), \" \\u548C \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7279\\u6027\"), \" \\u4E24\\u90E8\\u5206\\uFF0C\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8BED\\u6CD5\"), \" \\u8FD9\\u5757 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Babel\"), \" \\u53EF\\u4EE5\\u8F6C\\u6362\\uFF0C\\u4E5F\\u5C31\\u662F\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u7BAD\\u5934\\u51FD\\u6570\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Class \\u8BED\\u6CD5\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u89E3\\u6784\\u5904\\u7406\"), \"\\u7B49\\uFF0C\\u672C\\u8D28\\u4E0A\\u662F\\u5199\\u6CD5\\u4E0D\\u540C\\u3002\\u4F46\\u662F\\u7279\\u6027\\u63A5\\u53E3\\uFF0C\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Array.from\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Object.assign\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"WeakMap\"), \" \\u8FD9\\u4E9B\\u4E0D\\u662F\\u8BED\\u6CD5\\uFF0CBabel \\u672C\\u8D28\\u4E0A\\u5E76\\u6CA1\\u6709\\u5904\\u7406\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u65B0\\u7684 API\\u3001\\u9759\\u6001\\u65B9\\u6CD5\\u3001\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u5E94\\u8BE5\\u662F\\u5F15\\u5165 polyfill \\u6216\\u8005 shim \\u7684\\u4E1C\\u897F\\u6765\\u89E3\\u51B3\\u7684\\uFF0C\\u7528\\u6765\\u63D0\\u4F9B\\u5E73\\u53F0\\u7279\\u6027\\u5DEE\\u5F02\\u7684\\u62B9\\u5E73\\uFF0C\\u4E3A\\u4E86\\u89E3\\u51B3\\u8FD9\\u4E9B\\u7279\\u6027\\u95EE\\u9898\\uFF0Cbabel \\u63D0\\u4F9B\\u4E86\\u591A\\u4E2A\\u65B9\\u6848\\u6765\\u89E3\\u51B3\\u8FD9\\u4E2A\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"3.1 @babel-preset-env \\u5185\\u7F6E\\u7684\\u57AB\\u7247\\u5904\\u7406\"), mdx(\"p\", null, \"preset-env \\u5B98\\u65B9\\u63A8\\u8350\\u7684\\u63D2\\u4EF6\\u96C6\\u5408\\uFF0C\\u91CC\\u9762\\u9664\\u4E86\\u53EF\\u4EE5\\u6839\\u636E\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\u6765\\u667A\\u80FD\\u9009\\u62E9\\u8BED\\u6CD5\\u63D2\\u4EF6\\uFF0C\\u8FD8\\u4F1A\\u63D0\\u4F9B\\u57AB\\u7247\\u7684\\u529F\\u80FD\\u4E5F\\u5C31\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useBuiltIns\"), \" \\u914D\\u7F6E\\u3002\"), mdx(\"h4\", null, \"3.1.1 entry \\u9009\\u9879\"), mdx(\"p\", null, \"\\u5F53 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useBuiltIns: entry\"), \" \\u65F6\\uFF0C\\u9700\\u8981\\u624B\\u52A8\\u5B89\\u88C5 core-js \\u5305\\u6765\\u7ED9 env \\u4F7F\\u7528\\uFF0C\\u4F46\\u662F\\u53EA\\u9700\\u8981\\u5168\\u5C40\\u5F15\\u5165\\u4E00\\u6B21\\u5373\\u53EF\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npm install --save-dev @babel/core @babel/cli @babel/preset-env\\nyarn add core-js@3 regenerator-runtime\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  \\\"presets\\\": [\\n    [\\n      \\\"@babel/env\\\",\\n      {\\n        \\\"targets\\\": \\\"> 1%, IE 10\\\",\\n        \\\"useBuiltIns\\\": \\\"entry\\\",\\n      }\\n    ]\\n  ]\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u60C5\\u51B5\\u4E0B\\u9700\\u8981\\u624B\\u52A8\\u5F15\\u5165 polyfill\\uFF0Cenv \\u4F1A\\u81EA\\u52A8\\u6839\\u636E\\u6D4F\\u89C8\\u5668\\u76EE\\u6807\\u5F15\\u5165\\u5177\\u4F53\\u7684\\u57AB\\u7247\\u3002\\uFF08\\u4F1A\\u5F15\\u5165\\u4F60\\u58F0\\u660E\\u5F15\\u5165\\u7684\\u5168\\u90E8\\u6A21\\u5757\\uFF0C\\u5E76\\u4E0D\\u662F\\u6309\\u9700\\u5F15\\u5165\\uFF09\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// \\u8FD9\\u4E24\\u53E5\\u5728\\u5E94\\u7528\\u5165\\u53E3\\u5F15\\u5165\\uFF0C\\u4F1A\\u88AB env \\u81EA\\u52A8\\u6839\\u636E target \\u8BBE\\u7F6E\\u66FF\\u6362\\u4E3A\\u4E0D\\u540C\\u7684\\u57AB\\u7247\\nimport \\\"core-js/stable\\\";\\nimport \\\"regenerator-runtime/runtime\\\"\\n\\n// \\u6216\\u8005\\u5728\\u5165\\u53E3\\u4EC5\\u5F15\\u5165\\u4F60\\u7528\\u5230\\u7684\\uFF0Cenv \\u4F1A\\u53EA\\u5F15\\u5165 array \\u76F8\\u5173\\u7684\\u57AB\\u7247\\uFF0C\\u5373\\u4F7F\\u4F60\\u6CA1\\u6709\\u4F7F\\u7528 array \\u7684\\u65B9\\u6CD5\\u3002\\nimport \\\"core-js/es/array\\\";\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u7684\\u4E0D\\u662F\\u6309\\u9700\\u5F15\\u5165\\u662F\\u5982\\u679C\\u4F60 import \\u4E86 array\\uFF0C\\u5373\\u4F7F\\u4F60\\u6CA1\\u6709\\u4F7F\\u7528\\u6570\\u7EC4\\u7684\\u65B9\\u6CD5\\uFF0C\\u4ECD\\u7136\\u4F1A\\u5F15\\u5165 array \\u7684\\u76F8\\u5173\\u57AB\\u7247\\u3002\\u53EA\\u4E0D\\u8FC7\\u5982\\u679C\\u4F60 target \\u8BBE\\u7F6E\\u7684\\u8DB3\\u591F\\u9AD8\\uFF0C\\u53EF\\u80FD env \\u5E76\\u4E0D\\u4F1A\\u63D2\\u5165\\u8FD9\\u4E2A\\u57AB\\u7247\\u3002\\u8FD9\\u6837\\u7684\\u597D\\u5904\\u662F\\u4F60\\u53EA\\u9700\\u8981\\u5728\\u5F00\\u5934\\u5F15\\u5165\\u4E00\\u6B21\\u5373\\u53EF\\uFF0Cenv \\u4F1A\\u4E14\\u53EA\\u4F1A\\u6839\\u636E\\u4F60\\u5F15\\u5165\\u7684\\u90E8\\u5206\\u63D2\\u5165\\u57AB\\u7247\\u3002\"), mdx(\"p\", null, \"\\u597D\\u5904\\u662F\\u5927\\u578B\\u9879\\u76EE\\u4E00\\u6B21\\u6027\\u80FD\\u5904\\u7406\\u5168\\u90E8\\u57AB\\u7247\\u95EE\\u9898\\uFF1B\\u7F3A\\u70B9\\u5C31\\u662F\\u5305\\u4F53\\u79EF\\u504F\\u5927\\u3001\\u4F1A\\u6C61\\u67D3\\u5168\\u5C40\\u3001\\u4E0D\\u80FD\\u6309\\u9700\\u52A0\\u8F7D\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u65B9\\u6CD5\\u53EA\\u9002\\u5408\\u9879\\u76EE\\u4E2D\\uFF0C\\u800C\\u4E0D\\u9002\\u5408\\u7C7B\\u5E93\\u4E4B\\u7C7B\\u7684\\u5E94\\u7528\\uFF0C\\u6BD5\\u7ADF\\u4FB5\\u5165\\u6027\\u5F88\\u5927\\u3002\"), mdx(\"h4\", null, \"3.1.2 usage \\u9009\\u9879\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u9009\\u9879\\u4F1A\\u5728\\u6BCF\\u4E2A\\u72EC\\u7ACB\\u7684\\u6587\\u4EF6\\u4E2D\\u63D2\\u5165\\u4F7F\\u7528\\u5230\\u7684 polyfill \\u6A21\\u5757\\uFF0C\\u8FD9\\u4E2A\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u5165\\u53E3\\u5F15\\u5165\\u5168\\u90E8\\u5305\\uFF0Cenv \\u4F1A\\u5728\\u7F16\\u8BD1\\u6BCF\\u4E00\\u4E2A\\u5355\\u72EC\\u6587\\u4EF6\\u7684\\u65F6\\u5019\\u90FD\\u81EA\\u52A8\\u5F15\\u5165\\u5BF9\\u5E94\\u7684\\u57AB\\u7247\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npm install --save-dev @babel/core @babel/cli @babel/preset-env\\nyarn add core-js@3 regenerator-runtime\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  \\\"presets\\\": [\\n    [\\n      \\\"@babel/env\\\",\\n      {\\n        \\\"targets\\\": \\\"> 1%, IE 10\\\",\\n        \\\"useBuiltIns\\\": \\\"usage\\\",\\n      }\\n    ]\\n  ]\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u4E5F\\u662F\\u5B98\\u65B9\\u6BD4\\u8F83\\u63A8\\u8350\\u7684\\u65B9\\u5F0F\\uFF0C\\u6309\\u9700\\u52A0\\u8F7D\\uFF0C\\u80FD\\u591F\\u6BD4\\u8F83\\u597D\\u7684\\u89E3\\u51B3\\u5305\\u4F53\\u79EF\\u548C\\u65B9\\u4FBF\\u6027\\u7684\\u95EE\\u9898\\uFF0C\\u53EA\\u662F\\u4F1A\\u51FA\\u73B0\\u548C entry \\u76F8\\u540C\\u7684\\u7F3A\\u70B9\\uFF0C\\u5C31\\u662F\\u4ECD\\u7136\\u4F1A\\u5F15\\u5165 corejs \\u7684\\u6A21\\u5757\\uFF0C\\u6C61\\u67D3\\u5168\\u5C40\\u7684\\u53D8\\u91CF\\u548C\\u5B9E\\u4F8B\\u65B9\\u6CD5\\uFF0C\\u4FB5\\u5165\\u6027\\u8F83\\u5F3A\\u3002\"), mdx(\"h3\", null, \"3.2 @babel/plugin-transform-runtime\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u63D2\\u4EF6\\u7684\\u4E3B\\u8981\\u76EE\\u7684\\u662F\\u5C06 babel \\u7684\\u5F88\\u591A\\u8F85\\u52A9\\u51FD\\u6570\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@babel/runtime\"), \" \\u6765\\u4EE3\\u66FF\\uFF0C\\u589E\\u52A0\\u91CD\\u7528\\u6765\\u51CF\\u5C0F\\u5305\\u4F53\\u79EF\\uFF1B\\u53E6\\u4E00\\u4E2A\\u76EE\\u7684\\u662F\\u975E\\u4FB5\\u5165\\u6027\\u7684\\u89E3\\u51B3\\u57AB\\u7247\\u95EE\\u9898\\uFF0C\\u6240\\u4EE5\\u5BF9\\u4E8E\\u7C7B\\u5E93\\u6765\\u8BF4\\u662F\\u4E00\\u4E2A\\u66F4\\u597D\\u7684\\u57AB\\u7247\\u65B9\\u6848\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime\\nnpm install --save @babel/runtime-corejs3\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  \\\"presets\\\": [\\n    [\\n      \\\"@babel/env\\\",\\n      {\\n        \\\"targets\\\": \\\"> 1%, IE 10\\\",\\n        \\\"useBuiltIns\\\": false,\\n      }\\n    ]\\n  ],\\n  \\\"plugins\\\": [\\n    [\\n      \\\"@babel/plugin-transform-runtime\\\",\\n      {\\n        \\\"corejs\\\": 3, // 3 \\u652F\\u6301\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u57AB\\u7247\\n        \\\"useESModules\\\": true\\n      }\\n    ]\\n  ]\\n}\\n\")), mdx(\"h2\", null, \"4. \\u7ED3\\u8BBA / \\u6700\\u4F73\\u5B9E\\u8DF5\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5BF9\\u4E8E\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u4EE3\\u7801\\uFF0C\\u65E0\\u6240\\u8C13\\u4FB5\\u5165\\u539F\\u751F\\u65B9\\u6CD5\\uFF1A\"), mdx(\"ol\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C0F\\u578B\\u9879\\u76EE\\uFF0C\\u5305\\u5927\\u5C0F\\u654F\\u611F\\uFF1A\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"preset-env\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"useBuiltIns\\\": \\\"usage\\\"\"), \" \\u7684\\u5F62\\u5F0F\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5927\\u578B\\u9879\\u76EE\\uFF0C\\u5305\\u5927\\u5C0F\\u4E0D\\u654F\\u611F\\uFF1A\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"preset-env\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"\\\"useBuiltIns\\\": \\\" entry\\\"\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"import core-js\"), \" \\u7684\\u5F62\\u5F0F\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u9700\\u8981\\u590D\\u7528\\u8F85\\u52A9\\u51FD\\u6570\\uFF1A\\u4F7F\\u7528 1.1 \\u6216\\u8005 1.2 + \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transform-runtime\"), \" \\u4E0D\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"corejs\")))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5BF9\\u4E8E\\u7C7B\\u5E93\\uFF0C\\u4E25\\u683C\\u4FB5\\u5165\\u6027\\uFF0C\\u9700\\u8981\\u8F85\\u52A9\\u51FD\\u6570\\uFF1A\\n2.1 \\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transform-runtime\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"corejs: 3\"), \" \\u914D\\u7F6E\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"[\", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"useBuiltIns\"), \"]\", \" vs \", \"[\", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"transform-runtime\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"corejs\"), \"]\"), \" \\u4E8C\\u8005\\u9009\\u5176\\u4E00\\uFF0C\\u63A8\\u8350 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transform-runtime\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"corejs\"), \" \\u914D\\u7F6E\\u3002\\u8FD9\\u6837\\u5C31\\u80FD\\u6EE1\\u8DB3\\u5927\\u90E8\\u5206\\u7684\\u5F00\\u53D1\\u9700\\u6C42\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime\\nnpm install --save @babel/runtime-corejs3\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"{\\n  \\\"presets\\\": [\\n    [\\n      \\\"@babel/env\\\",\\n      {\\n        \\\"targets\\\": \\\"> 1%, IE 10\\\",\\n        \\\"useBuiltIns\\\": false,\\n      }\\n    ]\\n  ],\\n  \\\"plugins\\\": [\\n    [\\n      \\\"@babel/plugin-transform-runtime\\\",\\n      {\\n        \\\"corejs\\\": 3, // 3 \\u652F\\u6301\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u57AB\\u7247\\n        \\\"useESModules\\\": true\\n      }\\n    ]\\n  ]\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/full-stack.md","id":"e4929f26-4432-5ad2-a704-a0f176aa00a6","parent":{"name":"full-stack","sourceInstanceName":"blog"},"excerpt":"想分享的是自己对全栈的想法，从自豪的自称为全栈，到现在懂得术业有专攻，全栈是个职业，不能随便叫自己全栈开发工程师，对职业本身负责，能力广泛、兴趣宽广、懂得很多，也只能是我自己项目的全栈工程师。 Just do whatever it takes to make it work…","fields":{"title":"🚀 全栈=全干","slug":"/blog/full-stack","description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","date":"2019-09-28","redirects":null,"datetime":"2019-09-28 09:39:01","categories":["code"],"series":null,"tags":["思考","协作","技巧"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","协作","技巧"],"theme":null,"slug":"full-stack","date":"2019-09-28 09:39:01"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"full-stack\",\n  \"title\": \"🚀 全栈=全干\",\n  \"date\": \"2019-09-28 09:39:01\",\n  \"author\": \"Ubug\",\n  \"description\": \"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"思考\", \"协作\", \"技巧\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u81EA\\u5DF1\\u5BF9\\u5168\\u6808\\u7684\\u60F3\\u6CD5\\uFF0C\\u4ECE\\u81EA\\u8C6A\\u7684\\u81EA\\u79F0\\u4E3A\\u5168\\u6808\\uFF0C\\u5230\\u73B0\\u5728\\u61C2\\u5F97\\u672F\\u4E1A\\u6709\\u4E13\\u653B\\uFF0C\\u5168\\u6808\\u662F\\u4E2A\\u804C\\u4E1A\\uFF0C\\u4E0D\\u80FD\\u968F\\u4FBF\\u53EB\\u81EA\\u5DF1\\u5168\\u6808\\u5F00\\u53D1\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u5BF9\\u804C\\u4E1A\\u672C\\u8EAB\\u8D1F\\u8D23\\uFF0C\\u80FD\\u529B\\u5E7F\\u6CDB\\u3001\\u5174\\u8DA3\\u5BBD\\u5E7F\\u3001\\u61C2\\u5F97\\u5F88\\u591A\\uFF0C\\u4E5F\\u53EA\\u80FD\\u662F\\u6211\\u81EA\\u5DF1\\u9879\\u76EE\\u7684\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u3002\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Just do whatever it takes to make it work.\")), mdx(\"h2\", null, \"\\u5168\\u6808\\u548C\\u6280\\u672F\\u65E0\\u5173\"), mdx(\"p\", null, \"\\u5E73\\u5FC3\\u800C\\u8BBA\\u4E00\\u4E2A\\u6709\\u81EA\\u6211\\u4FEE\\u517B\\u7684\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u5185\\u5FC3\\u5176\\u5B9E\\u6709\\u53D1\\u73B0\\u9700\\u6C42\\u7684\\u55C5\\u89C9\\u3001\\u6709\\u505A\\u4EA7\\u54C1\\u7684\\u5FC3\\u601D\\u3001\\u6709\\u8BBE\\u8BA1\\u89E3\\u51B3\\u65B9\\u6848\\u7684\\u80FD\\u529B\\u3001\\u6709\\u5F88\\u5F3A\\u7684\\u5B66\\u4E60\\u80FD\\u529B\\uFF0C\\u80FD\\u591F\\u4E3A\\u4E86\\u5B9E\\u73B0\\u76EE\\u6807\\u53BB\\u638C\\u63E1\\u4EFB\\u4F55\\u6240\\u5FC5\\u987B\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6240\\u4EE5\\u4E00\\u4E2A\\u5168\\u6808\\u5185\\u5FC3\\u66F4\\u613F\\u610F\\u81EA\\u79F0\\u662F \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"[\\u5BF9\\u80FD\\u591F\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u4EFB\\u4F55\\u6280\\u672F\\u611F\\u5174\\u8DA3\\u7684\\u4EBA]\"), \"\\u3002\"), mdx(\"p\", null, \"\\u5F88\\u5C11\\u4EBA\\u53EF\\u4EE5\\u5BF9\\u5168\\u90E8\\u6280\\u672F\\u6808\\u90FD\\u6709\\u975E\\u5E38\\u6DF1\\u7684\\u7406\\u89E3\\uFF0C\\u6BD5\\u7ADF\\u786E\\u5B9E\\u975E\\u5E38\\u56F0\\u96BE\\uFF0C\\u751A\\u81F3\\u9700\\u8981\\u5728\\u4E1A\\u52A1\\u5C42\\u9762\\u6DF1\\u8015\\u5F88\\u4E45\\u624D\\u80FD\\u5BF9\\u6280\\u672F\\u6808\\u7406\\u89E3\\u6DF1\\u5165\\u3002\\u4F46\\u662F\\u5168\\u6808\\u6240\\u8FFD\\u6C42\\u7684\\uFF0C\\u662F\\u4E3A\\u4E86\\u65E0\\u8BBA\\u5982\\u4F55\\u90FD\\u8981\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u6001\\u5EA6\\uFF0C\\u6709\\u8DB3\\u591F\\u7684\\u5174\\u8DA3\\u9A71\\u4F7F\\u53BB\\u5B66\\u4E60\\u65B0\\u7684\\u9886\\u57DF\\uFF0C\\u8FC8\\u51FA\\u8212\\u9002\\u533A\\u7684\\u95E8\\u69DB\\uFF0C\\u5373\\u4F7F\\u5F88\\u7B28\\u62D9\\u7684\\u5B9E\\u73B0\\u4E5F\\u80FD\\u5B8C\\u6210\\u9047\\u5230\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u8BF4\\u767D\\u4E86\\uFF0C\\u6254\\u7ED9\\u4E00\\u4E2A\\u5168\\u6808\\u4E00\\u4E2A\\u95EE\\u9898\\uFF0C\\u4ED6\\u5C31\\u80FD\\u81EA\\u5DF1\\u4ECE\\u5206\\u6790\\u9700\\u6C42\\u3001\\u8BBE\\u8BA1\\u4EA7\\u54C1\\u5230\\u8BBE\\u8BA1\\u754C\\u9762\\u3001\\u5B8C\\u6210\\u4EA7\\u54C1\\uFF0C\\u72EC\\u7ACB\\u8D1F\\u8D23\\u6240\\u6709\\u6280\\u672F\\u6808\\uFF0C\\u5373\\u4F7F\\u5E76\\u4E0D\\u80FD\\u5728\\u6BCF\\u4E00\\u65B9\\u9762\\u90FD\\u505A\\u7684\\u5F88\\u597D\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u5728\\u5982\\u4ECA\\u7684 IT \\u9886\\u57DF\\u7EC6\\u5206\\u5E02\\u573A\\uFF0C\\u5927\\u90E8\\u5206\\u662F\\u627F\\u62C5\\u5927\\u524D\\u7AEF\\u548C\\u540E\\u7AEF\\u4E1A\\u52A1\\u7684\\u5C97\\u4F4D\\uFF0C\\u5305\\u62EC\\u7528\\u6237\\u754C\\u9762\\uFF08Web\\u3001App\\uFF09\\u3001\\u540E\\u53F0\\u63A5\\u53E3\\u548C\\u6570\\u636E\\u5904\\u7406\\u7B49\\u6D41\\u7A0B\\u90FD\\u5728\\u6280\\u672F\\u6808\\u8303\\u56F4\\u5185\\uFF0C\\u4E1A\\u52A1\\u5E7F\\u5EA6\\u80FD\\u591F\\u8986\\u76D6\\u5B8C\\u6574\\u7684\\u4E00\\u4E2A\\u4EA7\\u54C1\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u5174\\u8D77\\u4E00\\u65B9\\u9762\\u662F\\u56E0\\u4E3A\\u5DE5\\u7A0B\\u5E08\\u5929\\u751F\\u5BF9\\u6280\\u672F\\u5E7F\\u5EA6\\u7684\\u62D3\\u5C55\\uFF0C\\u4F46\\u662F\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u521B\\u4E1A\\u516C\\u53F8\\u3001\\u5C0F\\u516C\\u53F8\\u7684\\u4E00\\u4E9B\\u4E2D\\u5C0F\\u578B\\u9879\\u76EE\\uFF0C\\u4E00\\u4E2A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u76F8\\u6BD4\\u5DE5\\u79CD\\u9F50\\u5168\\u7684\\u56E2\\u961F\\u6027\\u4EF7\\u6BD4\\u9AD8\\u7684\\u592A\\u591A\\u3002\\u6BD5\\u7ADF\\u6CA1\\u6709\\u90A3\\u4E48\\u4E25\\u82DB\\u7684\\u4EA7\\u54C1\\u9700\\u6C42\\u7684\\u80CC\\u666F\\u4E0B\\uFF0C\\u5F88\\u5C0F\\u7684\\u5F00\\u53D1\\u5468\\u671F\\uFF0C\\u51E0\\u4E4E\\u6CA1\\u6709\\u7684\\u6C9F\\u901A\\u6210\\u672C\\uFF0C\\u4F7F\\u7528\\u5168\\u6D41\\u7A0B\\u6280\\u672F\\u6808\\u5B8C\\u6210\\u76EE\\u6807\\u4EFB\\u52A1\\uFF0C\\u80FD\\u591F\\u6309\\u65F6\\u4E0A\\u7EBF\\u6EE1\\u8DB3\\u4F7F\\u7528\\u5BF9\\u5C0F\\u56E2\\u961F\\u3001\\u5C0F\\u516C\\u53F8\\u662F\\u5F88\\u91CD\\u8981\\u7684\\u3002\"), mdx(\"p\", null, \"\\u5F53\\u7136\\u5168\\u6808\\u5BF9\\u4E8E\\u6280\\u672F\\u4EBA\\u672C\\u8EAB\\u6765\\u8BF4\\uFF0C\\u592A\\u8FC7\\u4E8E\\u6D89\\u53CA\\u6280\\u672F\\u5E7F\\u5EA6\\uFF0C\\u56EB\\u56F5\\u541E\\u67A3\\u4F3C\\u7684\\u6F2B\\u65E0\\u76EE\\u7684\\u4E5F\\u6CA1\\u6709\\u4EFB\\u4F55\\u610F\\u4E49\\uFF0C\\u8FD9\\u4E9B\\u6280\\u672F\\u6808\\u7684\\u70B9\\u6570\\u5206\\u914D\\u8FD8\\u662F\\u6839\\u636E\\u505A\\u7684\\u4E8B\\u60C5\\u6765\\u8003\\u8651\\uFF0C\\u6F2B\\u65E0\\u76EE\\u7684\\u7684\\u4E71\\u5B66\\u4E0D\\u662F\\u5168\\u6808\\u7684\\u672C\\u610F\\uFF0C\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6574\\u4E2A\\u77E5\\u8BC6\\u4F53\\u7CFB\\u548C\\u6280\\u80FD\\u56FE\\u7684\\u7EF4\\u62A4\\u662F\\u4E00\\u4E2A\\u5DE5\\u7A0B\\u5E08\\u4EF7\\u503C\\u6700\\u5927\\u5316\\u7684\\u5173\\u952E\"), \"\\u3002\"), mdx(\"h2\", null, \"\\u80FD\\u591F\\u5168\\u6808\\uFF0C\\u4F46\\u4E0D\\u662F\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\"), mdx(\"p\", null, \"\\u53EF\\u662F\\uFF0C\\u7231\\u597D\\u5F88\\u5E7F\\u6CDB\\uFF0C\\u4F46\\u662F\\u5174\\u8DA3\\u6709\\u5927\\u5C0F\\uFF0C\\u4ECE\\u7B2C\\u4E00\\u884C\\u4EE3\\u7801\\u5230\\u73B0\\u5728\\u6240\\u77E5\\u9053\\u7684\\u6280\\u672F\\u6808\\u786E\\u5B9E\\u53EF\\u4EE5\\u88AB\\u79F0\\u4E3A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u6280\\u672F\\u4E0A\\u80FD\\u591F\\u7528\\u5F88\\u591A\\u80FD\\u529B\\u505A\\u670D\\u52A1\\u5668\\u642D\\u5EFA\\u548C\\u7EF4\\u62A4\\u3001\\u6570\\u636E\\u5E93\\u67E5\\u8BE2\\u3001\\u540E\\u53F0\\u63A5\\u53E3\\uFF0C\\u80FD\\u591F\\u7528\\u5F88\\u591A\\u8BED\\u8A00\\u505A\\u5305\\u62EC\\u547D\\u4EE4\\u884C\\u3001Web\\u3001Flutter\\u3001Android\\u3001IOS\\u3001\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u80FD\\u591F\\u505A\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u3001\\u9700\\u6C42\\u754C\\u9762\\u8BBE\\u8BA1\\u751A\\u81F3\\u89C6\\u9891\\u6F14\\u793A\\u5236\\u4F5C\\uFF0C\\u4F46\\u662F\\u6211\\u5374\\u4E0D\\u559C\\u6B22\\u8FD9\\u4E2A\\u5934\\u8854\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u4E4B\\u4E8E\\u6211\\u81EA\\u5DF1\\uFF0C\\u613F\\u610F\\u4E3A\\u4E86\\u81EA\\u5DF1\\u7684\\u5C0F\\u60F3\\u6CD5\\u5C0F\\u9879\\u76EE\\u82B1\\u65F6\\u95F4\\u53BB\\u7814\\u7A76\\uFF0C\\u613F\\u610F\\u4E3A\\u4E86\\u6539\\u8FDB\\u81EA\\u5DF1\\u9879\\u76EE\\u7684\\u4E00\\u4E2A\\u5C0F\\u529F\\u80FD\\u7206\\u809D\\uFF0C\\u4E5F\\u613F\\u610F\\u7ED9\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u914D\\u9F50\\u5404\\u4E2A\\u7AEF\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5728\\u516C\\u53F8\\u662F\\u4E00\\u4E2A\\u4E25\\u8083\\u6CA1\\u90A3\\u4E48\\u9E21\\u8840\\u7684\\u5730\\u65B9\\uFF0C\\u6BCF\\u4E2A\\u5DE5\\u7A0B\\u5E08\\u9700\\u8981\\u4E3A\\u81EA\\u5DF1\\u7684\\u8F93\\u51FA\\u8D1F\\u8D23\\u3002\\u6211\\u5174\\u8DA3\\u8F83\\u5C0F\\u6216\\u8005\\u521A\\u63A5\\u89E6\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6211\\u505A\\u7684\\u51C6\\u5219\\u5927\\u90E8\\u5206\\u662F\\u80FD\\u7528\\u5373\\u53EF\\uFF0C\\u5185\\u5FC3\\u5F88\\u96BE\\u60F3\\u7740\\u53BB\\u4F18\\u5316\\u548C\\u66F4\\u597D\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u800C\\u5174\\u8DA3\\u5F88\\u5927\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6211\\u613F\\u610F\\u82B1\\u66F4\\u591A\\u7684\\u65F6\\u95F4\\u505A\\u51FA\\u4F18\\u96C5\\u7684\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u6211\\u662F\\u4E00\\u4E2A\\u6709\\u504F\\u597D\\u7684\\u5168\\u6808\\uFF0C\\u4F5C\\u4E3A\\u5F00\\u53D1\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u516C\\u53F8\\u662F\\u4E00\\u4E2A\\u4E0D\\u597D\\u7684\\u70B9\\uFF0C\\u6211\\u53EF\\u4EE5\\u5B8C\\u6210\\u9879\\u76EE\\u521D\\u671F\\u7684\\u5F00\\u53D1\\uFF0C\\u53EF\\u4EE5\\u7528\\u81EA\\u5DF1\\u5728\\u5168\\u6808\\u4E0A\\u7684\\u80FD\\u529B\\u5BF9\\u6280\\u672F\\u65B9\\u6848\\u8BC4\\u4F30\\uFF0C\\u800C\\u5982\\u679C\\u4E3A\\u7A0D\\u5FAE\\u5927\\u4E00\\u4E9B\\u7684\\u56E2\\u961F\\u5168\\u90E8\\u7684\\u6280\\u672F\\u6808\\u8D1F\\u8D23\\uFF0C\\u5C31\\u9700\\u8981\\u6DF1\\u5165\\u4E86\\u89E3\\uFF0C\\u5404\\u53F8\\u5176\\u804C\\u7684\\u4E13\\u5BB6\\uFF0C\\u771F\\u4E0D\\u662F\\u4E00\\u4E2A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u7684\\u5DE5\\u4F5C\\uFF0C\\u80FD\\u529B\\u518D\\u5F3A\\u4E5F\\u4E0D\\u884C\\u3002\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6211\\u7684\\u5168\\u6808\\u662F\\u6211\\u5174\\u8DA3\\u7684\\u6700\\u5927\\u4F53\\u73B0\\u3002\")), mdx(\"hr\", null), mdx(\"div\", null, mdx(\"div\", {\n    style: {\n      textAlign: 'center'\n    }\n  }, \"\\u751F\\u547D\\u4E0D\\u606F\\uFF0C\\u6298\\u817E\\u4E0D\\u6B62\\u3002\")), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}